import React from 'react';
import ReactDom from 'react-dom';

//function createMarkup() { 
//	return {
//		__html: '<p> 今年夏天，安德烈-戈麦斯是巴萨签下的第四名球员</p><img src="http://oatest.rogrand.com:9527/sportsFellow/userfiles/1/images/business/sportsDaynews/2016/11/568696577862367914(1).jpg" />' 
//	};
//}

//className Downapp extends React.Component {
//	render (){
//		return <div className="down-tdapp">
//					<div className="down-tdapp-wrap">
//						<h1 className="tdapp-logobox">
//							<img className="tdapplogo" src="src/img/tongdaodata.png" />
//						</h1>
//						<div className="tdapp-desc">
//							<h2>同道APP</h2>
//							<p>中甲、中乙联赛官方数据服务商</p>
//						</div>
//					</div>
//					<div className="tdapp-btnbox">
//						<a className="tdapp-btn" href="javascript:void(0)">打开APP</a>
//					</div>
//				</div>
//	}
//};

//className Vote extends React.Component {
//	render (){
//		return <div>
//					<p className="uvt-tip">this.props.quesTitle</p>
//					<div className="uvt-wrapper">
//						<div className="uvt-list {this.props.isVoteOver ? }">
//							<div className="uvtl-check">
//								<label className="uvtl-label">
//									<input className="form-control" type="{(this.props.quesType) ? 'radio' : checkbox}" name="{(this.props.quesType) ? this.props.number : ''}" value={this.props.optionId}/>
//									<i className="checkbox-i"></i>
//								</label>
//							</div>
//							<div className="uvtl-image">
//								<div className="uvtl-pic" style="background-image: url({"'"+this.props.optionUrl+"'"});"></div>
//							</div>
//							<div className="uvtl-info">
//								<div className="uvtl-name-checked">
//									<span className="uvtl-name">{this.props.option}</span><span className="uvtl-checked {this.props.isMyVote ? hide : '' }">(已选)</span>
//								</div>
//								<div className="uvtl-progress">
//									<div className="uvtl-progressbar"><span className="sr-only">this.props.percentages</span></div>
//								</div>
//								<div className="uvtl-num-percentage">
//									<span className="uvtl-num">{optionCount.props.optionCount}票</span><span className="uvtl-checked">22%</span>
//								</div>
//							</div>
//						</div>
//					</div>
//				</div>
//			</div>
//	}
//}


class Newsaboutlist extends React.Component {
	render (){
		var backgrounStyle = {
			backgroundImage:'url('+this.props.withPic+')'
		};
		return <div className="nab-list">
				<a href="javascript:void(0);">
					<div className="nab-list-flex">
						<div className="nab-list-image">
							<div className="nab-list-pic" style={backgrounStyle}></div>
						</div>
						<div className="nab-list-info">
							<p className="nabl-title text-ellipsis2">{this.props.withTitle}</p>
							<div className="nabl-date"><span>{this.props.withDate}</span></div>
						</div>
					</div>
				</a>
			</div>
			
	}
};
class CommentList extends React.Component { 
	render(){
		var commentmedialist = this.props.newCommentList;
		var commenmedias;
		console.log(commentmedialist)
		
		var md = commentmedialist.map(function(commentmedia,i){
			var backgroundimage = {
				backgroundImage :'url('+commentmedia.portrait_url+')'
			}
			var pics = []
			var pictureurl = commentmedia.pictureurl
			var pictureurlList = commentmedia.pictureurlList
			var piclis = []
			if(pictureurl){
				pics = [].concat(pictureurl)
			}
			if(pictureurlList && pictureurlList.length > 0){
				pictureurlList.forEach(function(pic,i){
					pics.push(pic['pictureurl'])
				})
			}
			pics.forEach(function(src,i){
				piclis.push(<Commentpics key={i} src={src}/>)
			})
			
			
			function createMarkup(){
				 return {__html: commentmedia.comMessage.toString()};
			};
			function createMarkup2(){
				 return {__html: commentmedia.comMessages.toString()};
			}
			var pic2s = []
			var pictureurls = commentmedia.pictureurls
			var pictureurlsList = commentmedia.pictureurlsList
			var picli2s = []
			if(pictureurls){
				pic2s = [].concat(pictureurls)
			}
			if(typeof pictureurlsList != 'undefined' && pictureurlsList.length > 0){
				pictureurlsList.forEach(function(pic,i){
					pic2s.push(pic['pictureurls'])
				})
			}
			pic2s.forEach(function(src,i){
				picli2s.push(<Commentpics key={i} src={src}/>)
			})
			return (
				<div className="comment-media" key={commentmedia.commentId}>
					<div className="user-image">
						<div className="user-pic" style={backgroundimage}></div>
					</div>
					<div className="comment-media-body">
						<div className="user-name-good">
							<span>{commentmedia.user_name}</span><span>{commentmedia.comLikeCount}赞</span>
						</div>
						<p className="user-create-date">{commentmedia.commentDate}</p>
						<div className={createMarkup2().__html?'comment-media':'comment-media hide'}>
							<div className="comment-media-body">
								<div className="user-comment">
									<p dangerouslySetInnerHTML={createMarkup2()}></p>
									<div className={pic2s.length > 0 ?'user-image-container' : 'user-image-container hide'}>
										<ul className="user-image-wrapper">
											{picli2s}
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div className="user-comment">
							<p dangerouslySetInnerHTML={createMarkup()}></p>
							<div className="user-image-container">
								<ul className="user-image-wrapper">
									{piclis}
								</ul>
							</div>
						</div>
					</div>
				</div>
			)
		}.bind(this))
		
		
		return	<div className="comment-content">
					<div className="comment-splendidness">
						<h3 className="comment-title"><i className="icon-splendidness"></i>{this.props.title}</h3>
					</div>
					{md}
				</div>
	}
}

class Commentpics extends React.Component{
	render(){
		var backgroundimage = {
			backgroundImage :'url('+this.props.src+')'
		}
		return <li className="user-send-image">
					<div className="user-send-pic" style={backgroundimage}></div>
				</li>
	}
}

class Commentmedia extends React.Component {
	createMarkup(){
		 return {__html: this.props.comMessage.toString()};
	};
	render (){
		return <div>
					
				</div>
	}
	
}

class Newsabout extends React.Component {
	render (){
		var withList = this.props.withList
		var row = []
		var i = 0
		var len = withList.length
		for(;i<len;i++){
			var news = withList[i]
			row.push(<Newsaboutlist withDate = {news.withDate} withTitle = {news.withTitle} withPic = {news.withPic} key={news.withId}/>)
		}
		
		return <div className="news-about">
				<h3 className="news-about-title"><i className="icon-newsbaout"></i>相关新闻</h3>
				{row}
			</div>
	}
};


class Newscontent extends React.Component {
	createMarkup(){
		 return {__html: this.props.newcontent.toString()};
	};
	render () {
		return <div className = "news-content">
					
					<div className="news-header">
						<h2 className="news-title">
							{this.props.title}
						</h2>
						<div className="news-creator-date"><span className="news-creator">{this.props.author}</span> <span className="news-date">{this.props.creattime}</span></div>
					</div>
					<div className="news-body">
						<div className="news-paper" dangerouslySetInnerHTML={this.createMarkup()}></div>
					</div>
					<Newsabout withList = {this.props.withList}/>
					<CommentList newCommentList = {this.props.newCommentList} title="最新评论"/>
					<CommentList newCommentList = {this.props.splendidCommentList} title="精彩评论"/>
				</div>
				
	}
}

//export default Downapp;



export default Newscontent;
